<template>
	<view class="container">
		<!-- 标题 -->
		<!-- <view class="title">选择你的 AI 恋爱对象</view> -->
		<view class="safe-area-top"/>
		<view class="custom-nav">
			<text class="title">选择你的AI恋爱对象</text>
		</view>
		<!-- 选项卡 -->
		<view class="tabs">
			<view v-for="(tab, index) in tabs" :key="index" :class="['tab-item', { active: currentTab === index }]"
				@tap="changeTab(index)">
				{{ tab }}
				<view v-if="currentTab === index" class="tab-underline" />
			</view>
		</view>

		<!-- 卡片列表（瀑布流式双列） -->
		<scroll-view scroll-y class="card-list">
			<view class="card-wrap">
				<view class="card" v-for="item in filteredList" :key="item.id" @tap="gotoDetail(item)">
					<text class="ai-tag">AI</text>
					<image :src="item.avatar_url" class="card-img" mode="aspectFill" />
					<view class="card-info">
						<view class="line">
							<text class="name">{{ item.name }}</text>
							<text class="age">{{ item.age }}岁</text>
						</view>
						<view class="line">
							<text class="desc">{{ item.mbti }}		{{ item.occupation }}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		computed
	} from 'vue'

	// 选项卡
	const tabs = ['全部', '女生', '男生']
	const currentTab = ref(0)
	const userList = ref([])

	// 切换 Tab
	function changeTab(index) {
		currentTab.value = index
	}
	
	function gotoDetail(item){
		uni.navigateTo({
			url:`/pages/detail/detail?id=${item.id}`
		})
	}

	// 模拟请求数据
	async function fetchData() {
		const res = await uni.request({ url: 'https://test.r.ads.sohu.com/api/v1/characters/?page=1&size=10'})
		userList.value = res.data.data.items
		// userList.value = [{
		// 		id: 1,
		// 		name: '润心',
		// 		age: 27,
		// 		mbti: 'INFJ',
		// 		occupation: '心理医生',
		//      personality_tags: "理性,专注,有责任心,内向,逻辑思维强",
		// 		gender: 'female',
		// 		avatar_url: 'https://example.com/f1.jpg',
		// 		description: "理性专注的程序员，用代码编织浪漫"
		// 	}],
	}

	// 计算过滤后列表
	const filteredList = computed(() => {
		if (currentTab.value === 1) return userList.value.filter(u => u.gender === 'female')
		if (currentTab.value === 2) return userList.value.filter(u => u.gender === 'male')
		return userList.value
	})

	onMounted(() => {
		fetchData()
		// 关闭splash页面
		// uni({
		// 	url: '/pages/splash/splash'
		// })
	})
</script>

<style scoped>
	.container {
		background-color: #121331;
		height: 100vh;
		display: flex;
		width: 100%;
		flex-direction: column;
	}
	
	.safe-area-top {
	  /* padding-top: env(safe-area-inset-top); */
	  height: 50px;
	}
	
	.custom-nav {
	  height: 44px;
	  justify-content: center;
	  align-items: center;
	  display: flex;
	}

	.title{
		text-align: center;
		font-size: 20px;
		color: #fff;
		padding: 20rpx 0;
		font-weight: bold;
	}

	.tabs {
		display: flex;
		justify-content: flex-start;
		padding: 20rpx 30rpx;
	}
	
	.tab-item {
		margin-right: 40rpx;
	}

	.tab-item {
		color: #999;
		font-size: 16px;
		position: relative;
	}

	.tab-item.active {
		color: #fff;
	}

	.tab-underline {
		height: 4rpx;
		background-color: #7a60ff;
		border-radius: 4rpx;
		width: 60rpx;
		margin-top: 10rpx;
		align-self: center;
	}

	.card-list {
		flex: 1;
		width: 100%;
		overflow-y: auto;
		padding: 20rpx;
	}

	.card-wrap {
		display: grid;
		grid-template-columns: calc(50% - 25rpx) calc(50% - 25rpx);
		gap: 20rpx;
		padding: 0 15rpx;
	}

	.card {
		position: relative;
		background-color: #1c1c3c;
		border-radius: 20rpx;
		width: 100%;
		margin-bottom: 20rpx;
		overflow: hidden;
	}

	.ai-tag {
		position: absolute;
		top: 0;
		right: 0;
		background-color: #4CAF50;
		color: white;
		padding: 20rpx 32rpx;
		border-radius: 0 20rpx 0 20rpx;
		font-size: 24rpx;
		z-index: 999;
		transform: translate(10rpx, -10rpx);
	}

	.card-img {
		width: 100%;
		height: 500rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		/* position: relative; */
	}

	.card-info {
		padding: 20rpx;
	}

	.line {
		display: flex;
		justify-content: start;
		color: #fff;
		margin-bottom: 10rpx;
	}

	.name {
		font-weight: bold;
	}

	.age {
		font-size: 26rpx;
		margin-left: 20px;
	}

	.desc {
		font-size: 24rpx;
		color: #ccc;
	}
</style>